<template>
	<view class="cu-modal" :class="modalState.modals=='cardNotesModal'?'show':''" @touchmove.stop.prevent="()=>{return}" @tap="hideModal">
		<view class="cu-dialog" @tap.stop>
			<view class="cu-bar bg-white justify-end">
				<!-- 卡详情 -->
				<view class="content">{{$t('JLink.publicText.cardDetails')}}</view>
				<view class="action" @tap="hideModal">
					<text class="cuIcon-close text-white"></text>
				</view>
			</view>
			<view class="text-left" style="padding-bottom:0">
				<view class="cu-list menu card_content sm-border no-card">
					<view class="cu-item">
						<view class="content">
							<!-- 名称 -->
							<text class="text-gray" style="margin-right:16upx">{{$t('JLink.publicText.name')}}</text>
						</view>
						<view class="action">
							<text class="text-blank text-md ">{{message.name}}</text>
						</view>
					</view>
					<view class="cu-item">
						<view class="content">
							<!-- 简介 -->
							<text class="text-gray">{{$t('JLink.publicText.introduce')}}</text>
						</view>
						<view class="action">
							<text class="text-blank text-md">{{message.introduce}}</text>
						</view>
					</view>
					<view class="cu-item">
						<view class="content">
							<!-- 购买时长 -->
							<text class="text-gray">{{$t('JLink.publicText.buyNum')}}</text>
						</view>
						<view class="action">
							<text class="text-blank text-md">
								{{message.buyNum}}
								<text v-if="message.buyUnit==0">{{$t('JLink.buy.Months')}}</text>
								<text v-else-if="message.buyUnit==1">{{$t('JLink.buy.Y')}}</text>
								<text v-else-if="message.buyUnit==2">{{$t('JLink.buy.D')}}</text>
							</text>
						</view>
					</view>
					<view class="cu-item">
						<view class="content">
							<text class="text-gray">{{$t('JLink.order.details.message.price')}}</text>
						</view>
						<view class="action">
							<text class="text-blank text-md">{{`${message.currencyUnit}${message.price}`}}</text>
						</view>
					</view>
					<view class="cu-item">
						<view class="content">
							<!-- 是否永久 -->
							<text class="text-gray">{{$t('JLink.publicText.forever')}}</text>
						</view>
						<view class="action">
							<text v-if="message.forever" class="text-blank text-md">{{$t('JLink.publicText.yes')}}</text>
							<text v-else class="text-blank text-md">{{$t('JLink.publicText.no')}}</text>
						</view>
					</view>
				</view>
				<view class="padding flex flex-direction" style="padding-top:0">
					<!-- 立即使用 -->
					<button :loading="loading" class="cu-btn lg text-primary bg-white" @tap="cardUseSubmit">{{$t('JLink.publicText.useButton')}}</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  props: {
    modalName: {
      type: String,
      default: ''
    },
    // 套餐卡信息
    message:{
      type:Object,
      default:()=>{
        return {}
      }
    }
  },
  data() {
    return {
      modalState: {
        modals: this.modalName
      },
      loading:false
    }
  },
  watch:{
    modalName(news, olds){
      this.modalState.modals = news;
    }
  },
  methods: {
    cardUseSubmit () {
      this.$emit('cardUseSubmit')
    },
    hideModal () {
      this.$emit('updateModalName', '')
    }
  }
}
</script>

<style lang="less" scoped>
	@import '@/common/style/main.css';
</style>
